页面滚动自动锚点定位 Tab 处理

您所在的位置：网站首页 › scrollview滚动到指定位置 wpf › 页面滚动自动锚点定位 Tab 处理

页面滚动自动锚点定位 Tab 处理

2023-08-11 19:31| 来源: 网络整理| 查看: 265

这是我参与更文挑战的第 12 天，活动详情查看：更文挑战

Lynne，一个能哭爱笑永远少女心的前端开发工程师。身处互联网浪潮之中，热爱生活与技术。

前言

首先描述下问题，应用场景如下：

随着滚动条的滚动，tab会对应进行切换，切换tab时，又会定位到tab对应内容的高度变化。

切换 tab 定位到对应内容这个可以用简单的锚点定位来实现，但如果需要平滑地进行内容滚动切换最好借助scrollIntoView 来实现，而要实现tab随滚动条的滚动进行切换则需要监听当前页面的滚动。

接下来以一段代码为例，分析实现思路。

{{ item }} 内容一内容二内容三 export default { data() { return { tabs: ["tab1", "tab2", "tab3"], active: 0, cont1: null, cont2: null, cont3: null, isClickTab: false }; }, methods: { backTop() { // 回到顶部 this.cont1.scrollIntoView({ block: "start", behavior: "smooth" }); }, switchTab(index) { // 根据当前index切换到对应的页面内容 if (index === 0) { this.cont1.scrollIntoView({ block: "start", behavior: "smooth" }); } else if (index === 1) { this.cont2.scrollIntoView({ block: "start", behavior: "smooth" }); } else { this.cont3.scrollIntoView({ block: "start", behavior: "smooth" }); } } }, mounted() { this.cont1 = this.$refs["cont_1"]; this.cont2 = this.$refs["cont_2"]; this.cont3 = this.$refs["cont_3"]; const tabH = this.$refs["tab"].offsetHeight; // 添加scroll事件监听 this.$refs["cont"].addEventListener("scroll", () => { if (this.cont3.getBoundingClientRect().top { return scrollTop >= this.slotsTopList[index + 1] && scrollTop < this.slotsTopList[index + 2] }) if (this.isSlide) return this.clickedIndex = currentIndex + 1 } } 复制代码

有一点小问题是，在点击时的滚动中也会发生滚动监听导致tab有一次来回切换，但目前又没办法确切知道点击平滑滚动完成的事件，因此我在点击切换tab时间中加了一个标记和延迟，以避免重复监听：

this.isSlide = false // 平滑滚动前 setTimeout(() => { // 点击时平滑滚动完成前不监听滚动 this.isSlide = false }, 600) 复制代码

然后在滚动监听高度时间中加入if (this.isSlide) return。

总结

以上是页面滚动锚点定位tab的实现原理和实现流程，最主要的是通过监听 window 的滚动事件，通过滚动高度来判断那个内容区在当前视口，从而操作对应的导航菜单里的状态的转换。点击导航菜单触发滚动，与此相对应。

当然我解决平滑滚动过程中重复监听的办法其实并不完美，如有更好的思路和建议，欢迎留言~~~

感激~~~

【本文地址】

页面滚动自动锚点定位 Tab 处理

页面滚动自动锚点定位 Tab 处理

今日新闻

推荐新闻